import React, {
    Component,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    Image,
    Alert,
} from 'react-native';

import Picker from 'react-native-picker';  //import...from...与require的区别在于哪里?
var CheckBox = require('react-native-checkbox');
var Title =require('./Title');
var registerQuery = require('./Query').query;
class Register extends Component {
    constructor(props){
        super(props);
        this.state = {phonenumber:'',
                password:'',
                authcode:'000000',
                passwordconfirm:'',
                isLoading:'false',
                checkBoxStatus:true,
        };
    }

    _onPressReturn(){
        this.props.navigator.pop();
    }

    _onPressBinding(){
        this.props.navigator.push({name:'Bind',params:{phone:this.state.phonenumber}});
    }

    _onPressRegister(){
        if(this.state.phonenumber === '')
        {
            Alert.alert('提示', '请填写手机号码');
        }
        else if(this.state.password === '')
        {
            Alert.alert('提示', '请输入密码');
        }
        else if(this.state.password !== this.state.passwordconfirm)
        {
            Alert.alert('提示', '两次输入的密码不一致');
        }
        else
        {
            registerQuery.registerUser(this.state.phonenumber,this.state.authcode,this.state.password,this,function(owner,response){
                console.log(response);
                if(owner)
                {
                    owner.setState({isLoading:false});
                    if(response.success !== true ){
                        Alert.alert("错误",response.error);
                    }
                    else{
                        Alert.alert('提示', '注册成功!您可以绑定BB卡号!');

                    }
                }
            })
        }
    }

    handleButtonPress() {
        this.setState({checkBoxStatus: !this.state.checkBoxStatus});
    }

    render() {
        var usrIcon = require('../../icon/avatar.png');
        var passIcon = require('../../icon/padlock.png');
        var authIcon = require('../../icon/smartphone.png');
        return (
            <View style={styles.container}>
                <Title title={{left:"返回",center:"家长注册",right:"绑定",
                    leftAct:this._onPressReturn.bind(this),rightAct:this._onPressBinding.bind(this)}}></Title>
                <View style={styles.itemContainer}>

                    <Image
                      style={styles.baobaoLogo}
                      source={require('../../icon/logo.png')}
                    />

                    <View style = {[styles.flowRight,styles.bottomLine]}>
                        <Image style={styles.registerIcon} source={usrIcon}/>
                        <TextInput style = {styles.registerInput}
                                   placeholder = "请输入手机号码进行注册"
                                   keyboardType = 'numeric'
                                   value = {this.state.phonenumber}
                                   onChangeText = {(text)=>{this.setState({phonenumber:text})}}
                        />
                    </View>
                    <View style = {[styles.flowRight,styles.bottomLine]}>
                        <Image style={styles.registerIcon} source={authIcon}/>
                        <TextInput style = {[styles.registerInput,styles.littleInput ]}
                                   placeholder = "请输入手机验证码"
                                   keyboardType = 'numeric'

                        />
                        <TouchableOpacity style={[styles.button,styles.littleButton]}>
                            <Text style={[styles.buttonText,{fontSize:12}]}>获取验证码</Text>
                        </TouchableOpacity>
                    </View>
                    <View style = {[styles.flowRight,styles.bottomLine]}>
                        <Image style={styles.registerIcon} source={passIcon}/>
                        <TextInput style = {styles.registerInput}
                                   placeholder = "请输入密码"
                                   secureTextEntry = {true}
                                   onChangeText = {(text)=>{this.setState({password:text})}}
                        />
                    </View>
                    <View style = {[styles.flowRight,styles.bottomLine]}>
                        <Image style={styles.registerIcon} source={passIcon}/>
                        <TextInput style = {styles.registerInput}
                                   placeholder = "请再次输入密码"
                                   secureTextEntry = {true}
                                   onChangeText = {(text)=>{this.setState({passwordconfirm:text})}}
                        />
                    </View>

                    <View style = {styles.descriptionBox}>
                        <Text style={styles.descriptionText} >
                            密码必须是6-20位字符,由字母符号或者数字组合而成,且不能为单独的数字或字母。
                        </Text>
                    </View>

                    <View style = {styles.flowRight}>
                        <TouchableOpacity style={styles.button} onPress={this._onPressRegister.bind(this)}>
                            <Text style={styles.buttonText}>立即注册</Text>
                        </TouchableOpacity>
                    </View>

                    <View style = {styles.flowRight}>
                        <CheckBox
                            label='已阅读《抱抱网用户协议》'
                            labelStyle={{fontSize:12,color:'#bbbbbb'}}
                            checked={this.state.checkBoxStatus}
                            onChange={this.handleButtonPress.bind(this)}  //避免回调函数中的this指针指向CheckBox控件自身
                        />
                    </View>

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'#fff',
    },
    baobaoLogo:{
        alignSelf:'center',
    },
    itemContainer:{
        flexDirection:'column',
        alignItems:'center',
        paddingLeft:50,
        paddingRight:50,
    },
    flowRight:{
        //width:200,
        alignSelf:'stretch',
        flexDirection: 'row', //水平排布
        alignItems: 'center', //中心线对齐
        marginTop:30,
    },
    bottomLine:{
        borderBottomWidth:1,
        borderBottomColor:'#bbbbbb',
    },
    registerIcon:{
        width:20,
        height:20,
        marginLeft:10,
        marginRight:10,
    },
    registerInput:{
        flex: 1,
        fontSize:14,
        height:30,
        color:'#bbbbbb',
    },
    button:{
        flex:1,
        height:30,
        borderRadius:6,
        borderWidth:1,
        borderColor:'#66C2FF',
        justifyContent:'center', //内容垂直方向居中
    },
    littleInput:{
        flex:3,
    },
    littleButton:{
        marginLeft:20,
        marginBottom:5,
        flex:2,
    },
    buttonText:{
        fontSize:14,
        textAlign:'center', //内容水平方向居中
        color:'#66C2FF'
    },
    descriptionBox:{
        alignSelf:'stretch',
        height:  50,
        marginTop:10,
    },

    descriptionText:{
        fontSize:12,
        color:'#bbbbbb',
    },
});

module.exports = Register;
